<template>
	<section>
		<!-- <search-bar></search-bar> -->
		
		<div class="box">
			<div class="left-box">
				<div class="progress" v-if='isShowProgress'>
					<p>模型生成中(模型生成大约1分钟,稍后可在个人中心查看)</p>
					<el-progress :percentage="percentage" :define-back-color='backColor' :stroke-width='15' :show-text="false" :color="customColor"></el-progress>
				</div>
				<div ref="threeContainer" class="model-content"></div>
			</div>
			
			<div class="right-box">
				<p class="title">作品信息</p>
				<div class="prompt-wrap mgb-15">
					<h1>提示词</h1>
					<div class="textarea-wrap">
						<textarea rows="3" cols="20" placeholder="描述你想要生成的物体，如火星。" maxlength="500" v-model="createInfo.name"></textarea>
					</div>
				</div>	
				
				<div class="prompt-wrap mgb-15">
					<h1>反面提示词<span>（可选）</span></h1>
					<div class="textarea-wrap">
						<textarea rows="3" cols="20" placeholder="描述你想要生成的物体，如火星。" maxlength="500" v-model="createInfo.negative_prompt"></textarea>
					</div>
				</div>	
				
				<div class="art-wrap mgb-15">
					<h1>艺术风格<span></span></h1>
					<ul>
						<li v-for='(item,index) in artList' :key='index' :class='flag==index?"current":""' @click="selectStyle(item,index)">
							<span>{{item.name}}</span>
							<img :src="item.src">
						</li>
					</ul>
				</div>	
				
				<ul class="integral-wrap mgb-15">
					<li>
						<span class="integral-label">预计耗时</span>
						<span class="integral-value">1分钟</span>
					</li>
					<li>
						<span class="integral-label">消耗积分</span>
						<span class="integral-value">5积分</span>
					</li>
				</ul>
				<footer>
				    <div class="next" :class="isClick ? '' : 'forbid'" @click="handleCreate">{{btnText}}</div>
				</footer>
			</div>
		</div>
	</section>
</template>

<script>
	import * as THREE from "three";
	import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
	import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
	import SearchBar from '@/components/SearchBar';
    import ElImageViewer from 'element-ui/packages/image/src/image-viewer';
    import {createModel} from '@/api/model';
    import {mapState} from "vuex";
    import utils from '@/assets/js/utils';
	import watermark from '@/assets/js/watermark.js'
export default {
    data() {
    	return {
			createInfo:{
				name:"",
				negative_prompt:"",
				art_style:'auto'
			},
			flag:0,
            artList:[
				{name:"智能",key:"auto",src:require("@/assets/img/zhineng.png")},
				{name:"写实",key:"realistic",src:require("@/assets/img/xieshi.png")},
				{name:"卡通",key:"cartoon",src:require("@/assets/img/cartoon.png")},
				{name:"雕塑",key:"sculpture",src:require("@/assets/img/polygon.png")}
			], 
			customColor: '#FF8A00',
			backColor:"#EEEEEE",
			isShowProgress:false,
			percentage:30,
			camera: null,
			scene: null,
			renderer: null,
			isClick:true,
			btnText:"生成"
		};
    },
	
	// mounted(){
	// 	watermark.set("云图 3D",this.$refs.threeContainer);
	// },
	
	// beforeDestroy() {
	// 	watermark.set("",this.$refs.threeContainer);
	// },

    methods:{
		initModel(){
			const width = this.$refs.threeContainer.clientWidth;
			const height = this.$refs.threeContainer.clientHeight;
			// 创建场景
			this.scene = new THREE.Scene();
			// 添加相机
			this.camera = new THREE.PerspectiveCamera(75, width / height, 0.01, 3000);
			this.camera.position.z = 1;
			this.camera.lookAt(0, 0, 0)
			// 创建渲染器
			this.renderer = new THREE.WebGLRenderer({ antialias: true,alpha:true });
			this.renderer.setSize(width, height);
			this.renderer.setClearColor(0x000000,0);
			this.$refs.threeContainer.appendChild(this.renderer.domElement);
			const loader = new GLTFLoader();				// 加载3D模型
			loader.load(this.modelUrl, (gltf) => {
				gltf.scene.traverse(function(child) {
					if (child.isMesh) {
						child.material.emissive = child.material.color;
						child.material.emissiveMap = child.material.map;
					}
				});
				this.scene.add(gltf.scene);
			},
			(xhr) =>{
				// console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
			},
			(error) => {
				console.error(error);
			})	
			//添加控制器
			let controls = new OrbitControls(this.camera, this.renderer.domElement);
			controls.addEventListener("change", () => {
				this.renderer.render(this.scene, this.camera);
			});
		},
		
		animate(){
			requestAnimationFrame(this.animate);
			this.renderer.render(this.scene, this.camera);
		},
		
		//选择服务项目
		selectStyle(item,index){
			this.flag = index;
			this.createInfo.art_style = item.key;
		},
				
        // 生成模型
        handleCreate(){
			if(!this.isClick) return;
			if(!this.createInfo.name){
				this.$message("请输入提示词");
				return
			}
			if(this.flag === ""){
				this.$message("请选择艺术风格");
				return
			}
			this.isClick = false;
        	this.submitCreate();
        },
        
        // 确定生成模型
        async submitCreate(){
        	const { data, status } = await createModel(this.createInfo);
        	if (status !== 200) return 
			if(data.code == 200){
				this.isShowProgress = true;
				this.btnText = "模型生成大约1分钟,稍后可在个人中心查看"
			}
			else{
				this.$message.warning(data && data.message || '模型生成失败');
			}
        }
    },
    
	components:{
        ElImageViewer,
		SearchBar
	}
};
</script>

<style>
    .el-image-viewer__close{
        color: #fff;
    }
</style>

<style lang="scss" scoped>
    @include input-nubmer;
	textarea::-webkit-input-placeholder { /* WebKit browsers 适配谷歌 */
	    @include textarea-placeholder;
	}
	textarea:-moz-placeholder { /* Mozilla Firefox 4 to 18 适配火狐 */
	    @include textarea-placeholder;
	}
	textarea::-moz-placeholder { /* Mozilla Firefox 19+ 适配火狐 */
		@include textarea-placeholder;
	}
	textarea:-ms-input-placeholder { /* Internet Explorer 10+  适配ie*/
	    @include textarea-placeholder;
	}
	
	.box{
		display: flex;
		justify-content: center;
		justify-content: space-between;
		.left-box{
			@include flex-row;
			justify-content: center;
			width: 50%;
			background: #F0F3F4;
			border-radius: 10px 10px 10px 10px;
			box-sizing: border-box;
			.progress{
				width: 60%;
				p{
					margin-bottom: 10px;
					font-size: 14px;
					color: #666666;
				}
				// ::v-deep(.el-progress-bar__outer){
				// 	border: 1px solid #999999;
				// }
				:deep(.el-progress-bar__outer){
					border: 1px solid #999999;
				}
			}
			// .model-content{
			// 	width: 100%;
			// 	height:100%;
			// 	position: relative;
			// }
		}
		.right-box{
			width: 48%;
			padding: 30px 26px 16px 26px;
			background: #FFFFFF;
			border-radius: 10px 10px 10px 10px;
			border: 1px solid #CCCCCC;
			box-sizing: border-box;
			h1{
				@include font-style;
				font-size: 16px;
				color: #333333;
				margin-bottom: 15px;
				position: relative;
				span{
					color:#FFC267
				}
			}
			.title{
				font-weight: 500;
				font-size: 20px;
				color: #333333;
				margin-bottom: 15px;
			}
			.prompt-wrap{
				.textarea-wrap{
					textarea{
						width: 100%;
						height: 120px;
						padding: 10px 15px;
						background: #F0F3F4;
						border-radius: 10px 10px 10px 10px;
						border: 1px solid #CFDDE1;
						box-sizing: border-box;
					}
				}
			}
		
			.art-wrap{
				ul{
					@include flex-row;
					justify-content: space-between;
					flex-wrap: wrap;
					li{
						@include cursor-style;
						@include flex-row;
						justify-content: space-between;
						width: 48%;
						height: 70px;
						padding: 22px 15px;
						margin-bottom: 10px;
						background: #F0F3F4;
						border-radius: 10px 10px 10px 10px;
						box-sizing: border-box;
						span{
							padding: 5px 15px;
							@include font-style;
							background: #D4D9DB;
							border-radius: 60px 60px 60px 60px;
							font-size: 16px;
							color: #FFFFFF;
						}
						img{
							display: block;
							width: 42px;
							height: 42px;
						}
					}
					
					.current{
						background: #DDF7FF;
						span{
							background: #80DDFF;
						}
					}
				}
			}
			
			.integral-wrap{
			    li{
			        @include cursor-style;
					@include flex-row;
					justify-content: space-between;
					font-size: 14px;	
			        .integral-label{
						color: #666666;
					}
					.integral-value{
						color: #333333;	
					}
			    }
				li:not(:last-child){
					margin-bottom: 10px;
				}
			}
			.mgb-15{
				margin-bottom: 15px; 
			}
			footer{
			    div{
			        @include cursor-style;
			        width: 100%;
			        height: 50px;
			        line-height: 50px;
			        text-align: center;
					background: #FFC267;
					border-radius: 5px 5px 5px 5px;
					font-size: 16px;
					color: #FFFFFF;
			    }
				.forbid{
					background: #ccc;
					cursor: default;
				}
			}
			
		}
	}
	
</style>